<template>
    <div>
        <el-card>
            <div>
                当日应收金额：<el-tag type="success">{{ countRentPayable }}</el-tag>
                当日实收金额：<el-tag type="warning">{{ countRentActual }}</el-tag>
                当日收到押金：<el-tag type="danger">{{ countDeposit }}</el-tag>
            </div>  
        </el-card>
        <el-card>
            <div ref="rentalChart" :style="{ width: '95%', height: '400px' }"></div>
        </el-card>
        <el-card>
            <div ref="returnChart" :style="{ width: '95%', height: '400px' }"></div>
        </el-card>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import financeUtil from '@/api/finance';

export default {
    data() {
        return {
            rentalChart: null,
            returnChart: null,
            hoursRental: [],
            hoursReturn: [],
            rentalNum: [],
            returnNum: [],
            countRentPayable: 0,
            countRentActual: 0,
            countDeposit: 0
        }
    },
    mounted() {
        this.initRentalChart();
        this.initReturnChart();
        this.getData();
    },
    created() {
        this.getCost();
    },
    methods: {
        getCost(){
            financeUtil.countDayCost().then(res=>{
                if(res.success){
                    if(res.data!=null){
                        this.countRentPayable = res.data.countRentPayable;
                        this.countRentActual = res.data.countRentActual;
                        this.countDeposit = res.data.countDeposit;
                    }
                }
            })
        },
        getData(){
            // 访问后台接口获取数据
            financeUtil.countDayRental().then(res=>{
                if(res.success){
                    this.hoursRental = res.data[0];
                    this.rentalNum = res.data[1];   
                    this.updateRentalChart();
                }
            })
            financeUtil.countDayReturn().then(res=>{
                if(res.success){
                    this.hoursReturn = res.data[0];
                    this.returnNum = res.data[1];
                    this.updateReturnChart();
                }
            })
        },
        updateRentalChart(){
            this.rentalChart.setOption({
                xAxis: {
                    data: this.hoursRental,
                },
                series: [
                    {
                        data: this.rentalNum,
                    },
                ]
            })
        },
        updateReturnChart(){
            this.returnChart.setOption({
                xAxis: {
                    data: this.hoursReturn,
                },
                series: [
                    {
                        data: this.returnNum,
                    }
                ]
            })
        },
        initRentalChart() {
            this.rentalChart = echarts.init(this.$refs.rentalChart);
            this.rentalChart.setOption({
                title: {
                    text: '日报出租数据统计',
                    subtext: new Date().toLocaleDateString()
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    }
                },
                legend: {
                    data: ['出租数量']
                },
                grid:{
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        saveAsImage: {},
                        mark:{show:true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['line', 'bar']
                        },
                        saveAsImage:{show:true}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap:false,
                    data: this.hoursRental,
                    axisTick: {show: false},
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '出租数量',
                        data: this.rentalNum,
                        type: 'line',
                        barGap:0,
                        emphasis: {
                            focus: 'series'
                        },
                    },
                ]
            })
        },
        initReturnChart() {
            this.returnChart = echarts.init(this.$refs.returnChart);
            this.returnChart.setOption({
                title: {
                    text: '日报归还数据统计',
                    subtext: new Date().toLocaleDateString()
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    }
                },
                legend: {
                    data: ['归还数量']
                },
                grid:{
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        saveAsImage: {},
                        mark:{show:true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['line', 'bar']
                        },
                        saveAsImage:{show:true}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap:false,
                    data: this.hoursReturn,
                    axisTick: {show: false},
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '归还数量',
                        data: this.returnNum,
                        type: 'line',
                        barGap:0,
                        emphasis: {
                            focus: 'series'
                        },
                    },
                ]
            })
        }
    },
}
</script>
<style></style>